@let isFullScreen = builderFullScreen$ | async;
@if (isFullScreen) {
  <div *ngTemplateOutlet="toolbar; context: { isFull: isFullScreen }"></div>
}
<!-- placeholder for fixed -->
<div *ngTemplateOutlet="toolbar; context: { isFull: false }"></div>

<ng-template #toolbar let-isFull="isFull">
  <div class="builder-toolbar" [ngClass]="{ fixed: isFull }">
    <div class="wrapper flex justify-between items-center">
      @if (currentPage$ | async; as page) {
        <div class="left flex flex-col justify-center items-start flex-[0_1_33.33%]">
          @if (page.body.length) {
            <div class="page-title flex items-center">
              <div contenteditable="true" (blur)="onTitle($event)">
                {{ page.title }}
              </div>
              @if (!page.uuid) {
                - 未发布
              }
              <app-icon [content]="{ svg: 'pencil-outline' }" />
            </div>
            @if (page.changed) {
              <div class="time">{{ date() | date: 'YYYY-MM-dd HH:mm' }}</div>
            }
          } @else {
            <div class="page-title">欢迎页</div>
          }
        </div>
      }
      <div class="middle text-primary justify-center items-center hidden md:flex flex-[0_1_33.33%]">
        <app-switch-preview />
        <app-switch-theme />
      </div>
      <div
        id="toolbar-right"
        class="right sm:gap-1 flex justify-end items-center flex-[0_1_33.33%]"
      >
        <mat-slide-toggle
          [checked]="isFullScreen"
          (change)="onFullScreen($event)"
          [matTooltip]="isFullScreen ? '显示边栏' : '切换全宽'"
        />
        <app-btn-generater
          matTooltip="快速生成页面"
          [content]="{
            label: '',
            color: 'primary',
            mode: 'icon',
            icon: { svg: 'lightning-bolt' },
          }"
        />
        @if (page) {
          <app-btn
            class="hidden sm:flex whitespace-nowrap"
            (click)="onSubmit(page)"
            [content]="{
              label: page.translation ? '更新翻译' : page.uuid ? '更新保存' : '创建新页面',
              color: 'primary',
              mode: 'raised',
              icon: {
                svg: page.uuid ? 'pencil' : 'pencil-plus',
              },
            }"
          />
        }
        <app-lang-switch />
        <app-builder-menu />
      </div>
    </div>
    <mat-divider />
  </div>
</ng-template>
